<template>
  <div class="login-page">
    <div class="dm-container">
      <h1>海卖</h1>
      <h2 class="mt80">用工具让</h2>
      <h2>直播电商更简单</h2>
      <p>Use tools to make <br> live streaming e-commerce easier</p>
    </div>
    <div class="login-container">
      <div class="form-section">
        <h3>登录</h3>
        <p>如遇到账号问题请联系底部咨询客服</p>
        <a-form :label-col="{ span: 24 }" :wrapper-col="{ span: 24 }">
          <!-- <a-form-item label="任务名称" v-bind="validateInfos.title"> -->
          <a-form-item label="" v-bind="validateInfos.mobilePhone">
            <div class="form-lebel">账号</div>
            <a-input class="form-input" placeholder="请输入" v-model:value="params.mobilePhone" />
          </a-form-item>
          <a-form-item label="" v-bind="validateInfos.password">
            <div class="form-lebel">密码</div>
            <a-input-password class="form-input" placeholder="请输入" v-model:value="params.password" />
          </a-form-item>
        </a-form>
        <!-- <div class="g-text-right g-link">
          <a-tooltip>
            <template #title>阿里云短信模版审核中，暂未开放短信登录、短信注册、找回密码等功能</template>
            <span>短信登录</span>
          </a-tooltip>
        </div> -->
        <a-button type="primary" class="login-btn" :loading="loading" @click="onLogin">登录</a-button>
        <div class="service-section">
          我有问题? <a href="javascript:;">咨询客服</a>
          <img class="service-img" src="@/assets/imgs/service.png" alt="">
        </div>
      </div>
      <Footer></Footer>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
// import { reqGetSalt, reqLogin } from '@r/api/index'
import Footer from '@/views/layout/Footer.vue'
import { useFormValidator } from './useFormValidator'
const appRouter = useRouter()
const params = ref({
  mobilePhone: '',
  password: ''
})
const { validateInfos, validate } = useFormValidator(params)

let loading = ref(false)
async function onLogin() {
  await validate()
  loading.value = true
  getSalt()
}
function getSalt() {
  reqGetSalt({ mobilePhone: params.value.mobilePhone })
    .then((res: any) => {
      loginByPassword(res)
    })
    .catch((res: any) => {
      loading.value = false
    })
}
function loginByPassword(res: any) {
  const { mobilePhone, password } = params.value
  reqLogin(mobilePhone, password, res.salt)
    .then((res: any) => {
      loading.value = false
      localStorage.setItem('token', res.token)
      localStorage.setItem('XUsername', res.name)
      appRouter.push({
        name: 'Home'
      })
    })
    .catch((res: any) => {
      loading.value = false
    })
}
</script>

<style lang="less" scoped>
.mt80 {
  margin-top: 80px;
}

.login-page {
  display: flex;
  height: 100vh;
}

.dm-container {
  width: 457px;
  background: #005EF6;
  color: #fff;
  padding-left: 60px;

  h1 {
    font-size: 48px;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 32px;
    margin-top: 56px;
  }

  h2 {
    font-size: 48px;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 72px;
    margin-bottom: 0;
  }

  p {
    font-size: 20px;
    font-weight: normal;
    color: #96C9FF;
    line-height: 28px;
    margin-top: 8px;
  }
}

.login-container {
  flex: 1;
  height: 100%;
  padding-left: 144px;
  position: relative;
  display: flex;
  align-items: center;

  .service-section {
    margin-top: 20px;
    text-align: center;
    position: relative;

    &:hover .service-img {
      display: block;
    }

    .service-img {
      position: absolute;
      bottom: 20px;
      right: 0px;
      display: none;
      width: 200px;
      height: auto;
    }
  }

  .form-section {
    h3 {
      font-size: 28px;
      font-weight: 600;
      color: #0D1D54;
      line-height: 39px;
    }

    p {
      font-size: 16px;
      font-weight: 500;
      color: #BFBFBF;
      line-height: 22px;
      margin-bottom: 64px;
    }
  }
}

.form-lebel {
  font-size: 20px;
  font-weight: normal;
  color: #404B7C;
  line-height: 28px;
}

.form-input {
  width: 360px;
  height: 44px;
  background: #FFFFFF;
  box-shadow: 0px 4px 16px 2px rgba(31, 37, 51, 0.15);
  border-radius: 8px 8px 8px 8px;
  margin-top: 10px;
}

.login-btn {
  margin-top: 50px;
  width: 360px;
  height: 44px;
  border-radius: 29px;
}
</style>